<<<<<<< HEAD
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<link rel="import" href="../bower_components/polymer/polymer.html">

<link rel="import" href="app-icons.html">

<link rel="import" href="../bower_components/app-route/app-location.html">
<link rel="import" href="../bower_components/app-route/app-route.html">

<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../bower_components/iron-selector/iron-selector.html">

<link rel="import" href="../bower_components/paper-fab/paper-fab.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/paper-styles/shadow.html">

<link rel="import" href="../bower_components/app-layout/app-drawer-layout/app-drawer-layout.html">
<link rel="import" href="../bower_components/app-layout/app-drawer/app-drawer.html">
<link rel="import" href="../bower_components/app-layout/app-scroll-effects/app-scroll-effects.html">
<link rel="import" href="../bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="../bower_components/app-layout/app-header-layout/app-header-layout.html">
<link rel="import" href="../bower_components/app-layout/app-toolbar/app-toolbar.html">

<link rel="import" href="article-headline.html">


<dom-module id="blog-app">

  <template>

    <style>

      :host {
        --app-primary-color: #0b8043;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      }

      app-drawer {
        --app-drawer-content-container: {
          background-color: var(--app-primary-color);
          overflow-x: hidden;
        };
      }

      app-drawer app-header {
        background-color: var(--app-primary-color);
      }

      .nav-menu {
        background-color: var(--app-primary-color);
        color: #fff;
      }

      a {
        text-decoration: none;
        color: inherit;
        font-size: inherit;
      }

      .nav-menu > a {
        display: block;
        padding: 12px 16px;
        font-size: 20px;
        font-weight: 500;
      }

      .nav-menu > a.iron-selected {
        background-color: #888;
      }

      .main-header {
        border-bottom: 1px solid #ddd;
        background-color: #fff;
        color: #444;
      }

      .title-toolbar {
        @apply --layout-center-center;
        box-sizing: border-box;
      }

      .nav-title-toolbar {
        color: #fff;
        width: 100vw;
      }

      .main-title-toolbar {
        width: 100%;
      }

      .title {
        padding-bottom: 40px;
        font-size: 60px;
        font-weight: 800;
      }

      .category-page {
        min-height: 100vh;
      }

      article-headline {
        @apply --shadow-transition;
        @apply --shadow-elevation-2dp;
        cursor: pointer;
      }

      article-detail {
        max-width: 736px;
        margin: 64px auto;
        background-color: #fff;
        @apply --shadow-elevation-2dp;
      }

      [hidden] {
        display: none;
      }

      @media (max-width: 580px) {

        /* make title smaller to fit on screen */
        .title {
          font-size: 40px;
          padding-bottom: 16px;
        }

      }

      /* narrow layout */
      @media (max-width: 808px) {

        article-detail {
          max-width: none;
          margin: 0;
        }

      }
      app-toolbar div {
        text-align: center;
      }
      iron-selector div{
        text-align: center;
        border-bottom: 1px solid #dddddd
      }
      .download-bt_type {


          background: #dddddd;
          border-radius: 3px;
          padding: 0.5% 0;
      }

      .download-bt_type span label {
          font-size: 14px;
          padding: 0 25px;
      }
    </style>

    <!-- setup routes -->
    <app-location route="{{route}}" use-hash-as-path></app-location>
    <app-route
        route="{{route}}"
        pattern="/:category"
        data="{{categoryData}}"
        tail="{{subRoute}}"></app-route>
    <app-route
        route="{{subRoute}}"
        pattern="/:page"
        data="{{pageData}}"
        tail="{{subsubRoute}}"></app-route>
    <app-route
        route="{{subsubRoute}}"
        pattern="/:id"
        data="{{idData}}"></app-route>

    <app-drawer-layout drawer-width="288px" responsive-width="1280px" narrow="{{narrow}}">

      <!-- nav panel -->
      <app-drawer >
        <app-header-layout has-scrolling-region  >

          <app-header fixed slot="header" >

            <!-- top toolbar -->
            <app-toolbar >
              <div style="margin-left: 100px" >

                <img src="icon/aa.jpg" style="width: 20px;height: 20px ;">
              </div>


            </app-toolbar>

            <!-- bottom toolbar -->
            <!--<app-toolbar class="title-toolbar nav-title-toolbar">-->
              <!--<div class="title">logo</div>-->
            <!--</app-toolbar>-->

          </app-header>

          <!-- nav menu -->
          <iron-selector
              class="nav-menu"
              selected="[[categoryData.category]]"
              attr-for-selected="name"
              on-iron-activate="_drawerSelected">
              <div style="border-top: 1px solid #dddddd">
              <img src="icon/wechat.png" style="width: 20px;height: 20px"/>
              <p>全部</p>
              </div>
              <div >
                <img src="icon/wechat.png" style="width: 20px;height: 20px"/>
                <p>正在下载</p>
              </div>
              <div >
                <img src="icon/wechat.png" style="width: 20px;height: 20px"/>
                <p>下载完成</p>
              </div>
              <div >
                <img src="icon/wechat.png" style="width: 20px;height: 20px"/>
                <p>下载失败</p>
              </div>
            <!--<template is="dom-repeat" items="[[articles]]">-->
              <!--&lt;!&ndash;<a name="[[item.name]]" href="#/[[item.name]]/list">{{item.title}}</a>&ndash;&gt;-->
            <!--</template>-->
          </iron-selector>

        </app-header-layout>
      </app-drawer>

      <!-- main panel -->
      <app-header-layout>

        <app-header fixed effects="waterfall" class="main-header" slot="header">

          <!-- top toolbar -->
          <!--<app-toolbar>-->
            <!--&lt;!&ndash; menu button &ndash;&gt;-->
            <!--<paper-icon-button-->
                <!--drawer-toggle-->
                <!--icon="app:menu"-->
                <!--hidden$="[[_shouldHideMenuButton(pageData.page, narrow)]]"></paper-icon-button>-->

            <!--&lt;!&ndash; back button &ndash;&gt;-->
            <!--&lt;!&ndash;<a&ndash;&gt;-->
                <!--&lt;!&ndash;href="#/[[categoryData.category]]/list"&ndash;&gt;-->
                <!--&lt;!&ndash;hidden$="[[_equal(pageData.page, 'list')]]">&ndash;&gt;-->
              <!--&lt;!&ndash;<paper-icon-button icon="app:arrow-back"></paper-icon-button>&ndash;&gt;-->
            <!--&lt;!&ndash;</a>&ndash;&gt;-->
          <!--</app-toolbar>-->

          <!-- bottom toolbar -->
          <app-toolbar class="">
            <d2l-file-uploader ></d2l-file-uploader>
            <d2l-file-uploader ></d2l-file-uploader>
          </app-toolbar>
        </app-header>
        <app-toolbar class="title-toolbar main-title-toolbar">

            <div class="download-bt_type">
            <span style="color: royalblue ;margin-left: 2% ;font-size: 18px">
                下载任务列表
            </span>
                <span>
                <!-- 下载的BT类型集合 -->
                <template is="dom-repeat" items="[[downloadBTUrls]]" >
                    <label>
                        <!-- 每条item数据 :checked勾选 点击 -->
                        <input type="checkbox"  on-click="onCheckedDownloadType" checked >{{item.typeName}}
                    </label>
                </template>
            </span>
            </div>
        </app-toolbar>

      </app-header-layout>

    </app-drawer-layout>

  </template>

  <script>
    Polymer({

      is: 'blog-app',

      properties: {

        /**
         * Articles data.
         */
        articles: Object,

        route: Object,

        subRoute: Object,

        subsubRoute: {type: Object, observer: '_subsubrouteChanged'},

        categoryData: Object,

        pageData: Object,

        idData: Object,

        _scrollPositionMap: {
          type: Object,
          value: function() {
            return {};
          }
        },
          //  下载类型的字段
          downloadBTUrls: {
              type: Array,
              value: [
                  { id: 1, typeName: "http", typeUrl: "http", checked: true },
                  { id: 2, typeName: "https", typeUrl: "https", checked: true },
                  { id: 3, typeName: "ftp", typeUrl: "ftp", checked: true },
                  { id: 4, typeName: "magnet", typeUrl: "magent", checked: true },
                  { id: 5, typeName: "bt", typeUrl: "bt", checked: true }
              ]
          },

      },

      observers: ['_updateArticle(articles, categoryData.category, idData.id)'],

      attached: function() {
        this.async(function() {
          if (!this.route.path) {
            this.set('route.path', '/art/list');
          }
        });
      },

      _equal: function(value1, value2) {
        return value1 === value2;
      },

      _updateArticle: function(articles, category, id) {
        if (!articles) {
          return;
        }
        for (var i = 0, cat; cat = articles[i]; i++) {
          if (cat.name === category) {
            for (var j = 0, article; article = cat.items[j]; j++) {
              if (article.id === id) {
                this.article = article;
                return;
              }
            }
          }
        }
      },

      _drawerSelected: function() {
        if (!this.$.drawer.persistent)
          this.$.drawer.close();
      },

      _shouldHideMenuButton: function(page, narrow) {
        return page === 'detail' || !narrow;
      },

      /**
       * Preserves the document scroll position, so
       * it can be restored when returning to a page.
       */
      _subsubrouteChanged: function(subroute, oldSubroute) {
        var map = this._scrollPositionMap;
        if (oldSubroute != null && oldSubroute.prefix != null) {
          // Don't reset the scroll position in the detail page.
          if (oldSubroute.prefix.indexOf('detail') == -1) {
            map[oldSubroute.prefix] = window.pageYOffset;
          }
        }
        if (map[subroute.prefix] != null) {
          Polymer.AppLayout.scroll({top: map[subroute.prefix], behavior: 'silent'});
        } else if (this.isAttached) {
          Polymer.AppLayout.scroll({top: 0, behavior: 'silent'});
        }
      }

    });
  </script>

</dom-module>
=======
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<link rel="import" href="../bower_components/polymer/polymer.html">

<link rel="import" href="app-icons.html">

<link rel="import" href="../bower_components/app-route/app-location.html">
<link rel="import" href="../bower_components/app-route/app-route.html">

<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../bower_components/iron-selector/iron-selector.html">

<link rel="import" href="../bower_components/paper-fab/paper-fab.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/paper-styles/shadow.html">

<link rel="import" href="../bower_components/app-layout/app-drawer-layout/app-drawer-layout.html">
<link rel="import" href="../bower_components/app-layout/app-drawer/app-drawer.html">
<link rel="import" href="../bower_components/app-layout/app-scroll-effects/app-scroll-effects.html">
<link rel="import" href="../bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="../bower_components/app-layout/app-header-layout/app-header-layout.html">
<link rel="import" href="../bower_components/app-layout/app-toolbar/app-toolbar.html">

<link rel="import" href="article-headline.html">
<link rel="import" href="article-detail.html">
<link rel="import" href="two-columns-grid.html">

<dom-module id="blog-app">

  <template>

    <style>

      :host {
        --app-primary-color: #0b8043;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      }

      app-drawer {
        --app-drawer-content-container: {
          background-color: var(--app-primary-color);
          overflow-x: hidden;
        };
      }

      app-drawer app-header {
        background-color: var(--app-primary-color);
      }

      .nav-menu {
        background-color: var(--app-primary-color);
        color: #fff;
      }

      a {
        text-decoration: none;
        color: inherit;
        font-size: inherit;
      }

      .nav-menu > a {
        display: block;
        padding: 12px 16px;
        font-size: 20px;
        font-weight: 500;
      }

      .nav-menu > a.iron-selected {
        background-color: #888;
      }

      .main-header {
        border-bottom: 1px solid #ddd;
        background-color: #fff;
        color: #444;
      }

      .title-toolbar {
        @apply --layout-center-center;
        box-sizing: border-box;
      }

      .nav-title-toolbar {
        color: #fff;
        width: 100vw;
      }

      .main-title-toolbar {
        width: 100%;
      }

      .title {
        padding-bottom: 40px;
        font-size: 60px;
        font-weight: 800;
      }

      .category-page {
        min-height: 100vh;
      }

      article-headline {
        @apply --shadow-transition;
        @apply --shadow-elevation-2dp;
        cursor: pointer;
      }

      article-detail {
        max-width: 736px;
        margin: 64px auto;
        background-color: #fff;
        @apply --shadow-elevation-2dp;
      }

      [hidden] {
        display: none;
      }

      @media (max-width: 580px) {

        /* make title smaller to fit on screen */
        .title {
          font-size: 40px;
          padding-bottom: 16px;
        }

      }

      /* narrow layout */
      @media (max-width: 808px) {

        article-detail {
          max-width: none;
          margin: 0;
        }

      }
      app-toolbar div {
        text-align: center;
      }
      iron-selector div{
        text-align: center;
        border-bottom: 1px solid #dddddd
      }
      .download-bt_type {


          background: #dddddd;
          border-radius: 3px;
          padding: 0.5% 0;
      }

      .download-bt_type span label {
          font-size: 14px;
          padding: 0 25px;
      }
    </style>

    <!-- setup routes -->
    <app-location route="{{route}}" use-hash-as-path></app-location>
    <app-route
        route="{{route}}"
        pattern="/:category"
        data="{{categoryData}}"
        tail="{{subRoute}}"></app-route>
    <app-route
        route="{{subRoute}}"
        pattern="/:page"
        data="{{pageData}}"
        tail="{{subsubRoute}}"></app-route>
    <app-route
        route="{{subsubRoute}}"
        pattern="/:id"
        data="{{idData}}"></app-route>

    <app-drawer-layout drawer-width="288px" responsive-width="1280px" narrow="{{narrow}}">

      <!-- nav panel -->
      <app-drawer id="drawer" slot="drawer">
        <app-header-layout has-scrolling-region  >

          <app-header fixed slot="header" >

            <!-- top toolbar -->
            <app-toolbar >
              <div style="margin-left: 100px" >

                <img src="icon/aa.jpg" style="width: 20px;height: 20px ;">
              </div>


            </app-toolbar>

            <!-- bottom toolbar -->
            <!--<app-toolbar class="title-toolbar nav-title-toolbar">-->
              <!--<div class="title">logo</div>-->
            <!--</app-toolbar>-->

          </app-header>

          <!-- nav menu -->
          <iron-selector
              class="nav-menu"
              selected="[[categoryData.category]]"
              attr-for-selected="name"
              on-iron-activate="_drawerSelected">
              <div style="border-top: 1px solid #dddddd">
              <img src="icon/wechat.png" style="width: 20px;height: 20px"/>
              <p>全部</p>
              </div>
              <div >
                <img src="icon/wechat.png" style="width: 20px;height: 20px"/>
                <p>正在下载</p>
              </div>
              <div >
                <img src="icon/wechat.png" style="width: 20px;height: 20px"/>
                <p>下载完成</p>
              </div>
              <div >
                <img src="icon/wechat.png" style="width: 20px;height: 20px"/>
                <p>下载失败</p>
              </div>
            <!--<template is="dom-repeat" items="[[articles]]">-->
              <!--&lt;!&ndash;<a name="[[item.name]]" href="#/[[item.name]]/list">{{item.title}}</a>&ndash;&gt;-->
            <!--</template>-->
          </iron-selector>

        </app-header-layout>
      </app-drawer>

      <!-- main panel -->
      <app-header-layout>

        <app-header fixed effects="waterfall" class="main-header" slot="header">

           <!--top toolbar-->
          <app-toolbar>
            <!-- menu button -->
            <paper-icon-button
                drawer-toggle
                icon="app:menu"
                hidden$="[[_shouldHideMenuButton(pageData.page, narrow)]]"></paper-icon-button>

            <!-- back button -->
            <!--<a-->
                <!--href="#/[[categoryData.category]]/list"-->
                <!--hidden$="[[_equal(pageData.page, 'list')]]">-->
              <!--<paper-icon-button icon="app:arrow-back"></paper-icon-button>-->
            <!--</a>-->
          </app-toolbar>

          <!-- bottom toolbar -->
          <app-toolbar class="">
            <d2l-file-uploader ></d2l-file-uploader>
            <d2l-file-uploader ></d2l-file-uploader>
          </app-toolbar>
        </app-header>
        <app-toolbar class="title-toolbar main-title-toolbar">

            <!--<div class="download-bt_type">-->
            <!--<span style="color: royalblue ;margin-left: 2% ;font-size: 18px">-->
                <!--下载任务列表-->
            <!--</span>-->
                <!--<span>-->
                <!--&lt;!&ndash; 下载的BT类型集合 &ndash;&gt;-->
                <!--<template is="dom-repeat" items="[[downloadBTUrls]]" >-->
                    <!--<label>-->
                        <!--&lt;!&ndash; 每条item数据 :checked勾选 点击 &ndash;&gt;-->
                        <!--<input type="checkbox"  on-click="onCheckedDownloadType" checked >{{item.typeName}}-->
                    <!--</label>-->
                <!--</template>-->
            <!--</span>-->
            <!--</div>-->
        </app-toolbar>

      </app-header-layout>

    </app-drawer-layout>

  </template>

  <script>
    Polymer({

      is: 'blog-app',

      properties: {

        /**
         * Articles data.
         */
        articles: Object,

        route: Object,

        subRoute: Object,

        subsubRoute: {type: Object, observer: '_subsubrouteChanged'},

        categoryData: Object,

        pageData: Object,

        idData: Object,

        _scrollPositionMap: {
          type: Object,
          value: function() {
            return {};
          }
        },
          //  下载类型的字段
          downloadBTUrls: {
              type: Array,
              value: [
                  { id: 1, typeName: "http", typeUrl: "http", checked: true },
                  { id: 2, typeName: "https", typeUrl: "https", checked: true },
                  { id: 3, typeName: "ftp", typeUrl: "ftp", checked: true },
                  { id: 4, typeName: "magnet", typeUrl: "magent", checked: true },
                  { id: 5, typeName: "bt", typeUrl: "bt", checked: true }
              ]
          },

      },

      observers: ['_updateArticle(articles, categoryData.category, idData.id)'],

      attached: function() {
        this.async(function() {
          if (!this.route.path) {
            this.set('route.path', '/art/list');
          }
        });
      },

      _equal: function(value1, value2) {
        return value1 === value2;
      },

      _updateArticle: function(articles, category, id) {
        if (!articles) {
          return;
        }
        for (var i = 0, cat; cat = articles[i]; i++) {
          if (cat.name === category) {
            for (var j = 0, article; article = cat.items[j]; j++) {
              if (article.id === id) {
                this.article = article;
                return;
              }
            }
          }
        }
      },

      _drawerSelected: function() {
        if (!this.$.drawer.persistent)
          this.$.drawer.close();
      },

      _shouldHideMenuButton: function(page, narrow) {
        return page === 'detail' || !narrow;
      },

      /**
       * Preserves the document scroll position, so
       * it can be restored when returning to a page.
       */
      _subsubrouteChanged: function(subroute, oldSubroute) {
        var map = this._scrollPositionMap;
        if (oldSubroute != null && oldSubroute.prefix != null) {
          // Don't reset the scroll position in the detail page.
          if (oldSubroute.prefix.indexOf('detail') == -1) {
            map[oldSubroute.prefix] = window.pageYOffset;
          }
        }
        if (map[subroute.prefix] != null) {
          Polymer.AppLayout.scroll({top: map[subroute.prefix], behavior: 'silent'});
        } else if (this.isAttached) {
          Polymer.AppLayout.scroll({top: 0, behavior: 'silent'});
        }
      }

    });
  </script>

</dom-module>
>>>>>>> 397e79e4a17088f53793379c64f21e94dd04e3f0
